<template>
  <header class="introduction">
    <h1>个人中心</h1>
  </header>
  <div class="container">
    <div class="line-row left">
      <el-affix :offset="120">
        <div class="user-info">
          <el-avatar class="avatar" :size="100" :src="circleUrl" @click="handleAvatarClick" >
            <span v-show="showChangeAvatar" class="change-avatar-text">更换头像</span>
          </el-avatar>
            <p class="name">sewer</p>
            <p class="username">@sewerbath</p>
            <p class="bio">sewer 暂无简介</p>
            <p class="email">邮箱：zhangsan@example.com</p>
            <el-button type="primary" plain @click="handleEditClick">编辑</el-button>
        </div>
      </el-affix>
      <!-- 用户基础信息 -->
    </div>
    <div class="line-row center">
      <div id="header" class="section">
        <h2>个人信息</h2>
        <p>这里是关于用户的详细个人信息...</p>
      </div>
      <div id="Body" class="section">
        <h2>兴趣爱好</h2>
        <p>用户喜欢阅读、旅行和运动...</p>
      </div>
      <div id="content" class="section">
        <h2>近期活动</h2>
        <p>用户参加了一些线上会议和线下活动...</p>
      </div>
      <div id="footer" class="section">
        <h2>联系方式</h2>
        <p>电话：1234567890</p>
      </div>
    </div>
    <div class="line-row right">
      <el-anchor class="anchor" :offset="70">
        <el-anchor-link href="#header">
          个人信息
        </el-anchor-link>
        <el-anchor-link href="#Body">
          兴趣爱好
        </el-anchor-link>
        <el-anchor-link href="#content">
          近期活动
        </el-anchor-link>
        <el-anchor-link href="#footer">
          联系方式
        </el-anchor-link>
      </el-anchor>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { ElAnchor, ElAnchorLink } from 'element-plus';
const handleEditClick=()=>{

}
// 注册组件
import 'element-plus/dist/index.css';

import { reactive, toRefs } from 'vue'

const state = reactive({
  circleUrl:
      'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
      'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'],
})

const { circleUrl, squareUrl, sizeList } = toRefs(state)
</script>

<style scoped lang="scss">
$bg-intro: #333;
$bg-user-info: #f0f0f0;
$bg-center: #f5f5f5;
$bg-right: #e0e0e0;
$bg-section: #ccc;
$text-color-light: white;
$text-color-dark: #666;
$font-size-username: 18px;
$font-size-email: 14px;

.introduction {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
  color: $text-color-light;
  h1 {
    font-weight: 300;
    text-align: center;
  }
}

.container {
  min-height: 55vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3rem auto;
  background-color: #fff;
  width: 100%;
}

.line-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  &.left {
    min-width: 20%;
    min-height: 45vh;

  }

  &.center {
    min-width: 60%;
     min-height: 45vh;
    margin: 2rem 10px;
  }

  &.right {
    width: 20%;
    min-height: 45vh;
  }
}

.section {
  width: 100%;
  background-color: $bg-section;
  color: $text-color-light;
  padding: 20px;
  border-radius: 5px;
}
.anchor{

}
.user-info{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
  }
  .name{
    margin-bottom: 5px;

  }
  .username {
    font-size: $font-size-username;
    font-weight: bold;
    margin: 0.5em auto;
  }
  .email {
    margin: 0.5em auto;
    font-size: $font-size-email;
    color: $text-color-dark;
  }

}
</style>
